<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>匿名表白墙</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <!--引入elementui得样式-->
  <link type="text/css" rel="stylesheet" href="/css/index.css"/>
  <!--引入vue得依赖必须再elementui之前引入vue-->
  <script type="text/javascript" src="/js/vue.js"></script>
  <script type="text/javascript" src="/js/index.js"></script>
  <script type="text/javascript" src="/js/axios.min.js"></script>
  <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
<div id="app">
<div>
  <el-button type="primary" @click="fabu">发布内容</el-button>
  <br>
</div>
  <div >
  <el-card class="box-card" v-for="wall in walls">
    <div slot="header" class="clearfix">
      <span>发布时间：{{wall.publishdate}}</span>
      <span style="float: right; padding: 3px 0" type="text">编号{{wall.id}}</span>
    </div>
    <div>
      {{wall.details}}
    </div>
    <div class="demo-image__preview" >
      <span v-for="item in wall.img">
        <el-image
                class="img"
              style="width: 100px; height: 100px"
              :src="item"
              :preview-src-list="srcList"
                v-if="item!==''"
        >
      </el-image>
      </span>

    </div>
    <div style="float: right; padding: 3px 0" type="text">{{wall.remark}}</div>
  </el-card>
</div>
</div>
</body>
<script>
  var app=new Vue({
    el:"#app",
    data:{
     walls:[]

    },
    created(){
      this.init()
    },
    methods:{
      fabu(){
        window.location.href="addwall.html"
      },
      init(){
        axios.post("wall/findAll").then(result => {
          this.walls=result.data.data
        })
      }
    }
  })
</script>
<style>
  .img{
    padding: 5px 5px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: auto;
    margin-top: 3px;
  }
</style>
</html>